const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { NamedChunksPlugin, HotModuleReplacementPlugin } = require('webpack')

module.exports = {
	entry: { // 配置文件的入口
		app: './src/index.js'
	}, 
	devtool: 'inline-source-map',
	// devServer: { //设置开发服务器
	// 	contentBase: './dist',
	// 	hot: true
	// },
	plugins: [
		new CleanWebpackPlugin(), // 清理dist文件, 用法不要参照webpack官方文档，具体参照插件文档
		new HtmlWebpackPlugin({ // html-webpack-plugin这个插件会帮我们默认生成一个html
			title: 'webpackDemo',
			scripts: [
				{
					src: './print.bundle.js',
					type: 'text/javascript'
				},
				{
					src: './app.bundle.js',
					type: 'text/javascript'
				}
			]
		}),
		new NamedChunksPlugin(),
		new HotModuleReplacementPlugin()
	],
	output: { // 配置输出文件
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist'),
		publicPath: '/'
	},
	module: { // 用test去匹配文件后缀，然后用loader去处理文件
		rules: [
			{
				test: /\.css$/, //匹配.css结尾的文件
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|jpg|gif|svg)$/,
				use: [
					'file-loader'
				]
			},
			{
			    test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: [
				  'file-loader'
				]
			}
		]
	}
}